import { Button } from 'antd-mobile'
import styles from '../css/query.module.css'
import { useSearchParams } from 'react-router-dom'
import dayjs from 'dayjs'

const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']

function Date() {
  // 设置 URL 中的查询参数项和对应的值
  const [sp, setSP] = useSearchParams()
  const dtStr = sp.get('date') // Tue Apr 08 2025 14:24:41 GMT+0800 (中国标准时间)
  const dt = dayjs(Number(dtStr) || dtStr)

  // 中间显示的日期和周
  const nowStr = dt.format('M月D日 ') + weeks[dt.day()]

  const setDate = (step) => {
    const newDtStr = dt.add(step, 'day').format('YYYY-MM-DD')
    // setSP({...原对象, 要更新的属性})
    setSP({ ...Object.fromEntries(sp), date: newDtStr })
  }

  return (
    <div className={styles.dateBox}>
      <Button
        color="primary"
        fill="none"
        disabled={dayjs().isSame(dt, 'date')}
        onClick={() => setDate(-1)}
      >
        前一天
      </Button>

      <span>{nowStr}</span>

      <Button
        color="primary"
        fill="none"
        disabled={Math.ceil(dt.diff(dayjs(), 'day', true)) >= 4}
        onClick={() => setDate(1)}
      >
        后一天
      </Button>
    </div>
  )
}

export default Date
